<template>
  <div>
    <div class="login-box">
      <!-- 登录框 -->
      <div class="loginFrom">
        <!-- 用户名 -->
        <el-input
          v-model="inputName"
          placeholder="请输用户名"
          @blur="blurInputName"
        ></el-input>
        <p>{{ inputNameTips }}</p>

        <!-- 密码 -->
        <el-input
          v-model="inputPass"
          @blur="blurInputPass"
          placeholder="请输密码"
        ></el-input>
        <p>{{ inputPassTips }}</p>
        <!-- 验证码 -->
        <div class="Verification">
          <p class="Verification-input">
            <!-- 内容 -->
            <el-input
              v-model="inputVerification"
              @blur="blurVerification"
              placeholder="请输入验证码"
            ></el-input>
          </p>
          <!-- 验证 -->
          <p class="Verification-Code">
            <span
              :style="`font-size: ${item.size}px;font-weight:${item.witch};color:${item.color};`"
              v-for="(item, index) in Verification_style"
              :key="index"
            >
              {{ item.name }}
            </span>
          </p>
        </div>
        <p>{{ inputVerificationTips }}</p>
        <!-- 登陆 -->
        <div class="login-tit">
          <el-button type="primary" @click="login">登陆</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    this.random_style();
  },
  beforeRouteEnter(to, from, next) {
    var tok = sessionStorage.getItem("tok");
    if (tok !== null) {
      next("/home" || "/");
    } else {
      next();
    }
  },
  data() {
    return {
      VerificationName: "", //随机出的验证码
      inputVerification: "", //输入的验证码
      inputName: "", //用户名
      inputPass: "", //密码
      Verification_style: [], //生成验证码的数据储存
      // 错误提示
      inputNameTips: "",
      inputPassTips: "",
      inputVerificationTips: "",
    };
  },

  methods: {
    random_style() {
      //随机验证码
      var sta = [];
      var cor = "0123654789abcdef1";
      var sty =
        "q,w,e,r,t,y,u,i,o,p,l,k,j,h,g,f,d,d,s,a,z,x,c,v,b,n,m,1,2,3,6,5,4,7,8,9,0,x";

      for (var i = 0; i <= 3; i++) {
        var arrx = sty.split(",");
        var obj = {};
        var random = Math.random() * (arrx.length - 0) + 0;
        var size = Math.random() * (35 - 12) + 12;
        obj.name = arrx[Math.floor(random)];
        obj.size = Math.floor(size);
        obj.witch = Math.floor(Math.random() * (900 - 0) + 0);
        var color = [];
        for (var v = 0; v <= 5; v++) {
          var index = Math.floor(Math.random() * (cor.length - 0) + 0);
          color.push(cor[index]);
        }
        obj.color = "#" + color.join("");
        obj.color == "#eee" ? (obj.color = "red") : "";
        sta.push(obj);
      }
      this.Verification_style = sta;
      var name = "";
      sta.map((i) => {
        name += i.name;
        // console.log(i.name)
      });
      this.VerificationName = name;
    },
    blurInputName() {
      //失去光标时判断账号是否输入
      //失去光标时判断是否输入用户名
      if (this.inputName == "") {
        this.inputNameTips = "账号不能为空";
      } else {
        this.inputNameTips = "";
      }
    },
    blurInputPass() {
      //失去光标时判断密码是否输入
      if (this.inputName == "") {
        this.inputPassTips = "密码不能为空";
      } else {
        this.inputPassTips = "";
      }
    },
    blurVerification() {
      //验证码判断
      if (this.inputVerification == "") {
        this.inputVerificationTips = "请输入验证码";
        return false;
      }
      if (this.inputVerification == this.VerificationName) {
        this.inputVerificationTips = "";
      } else {
        this.inputVerificationTips = "验证码输入错误";
      }
    },
    login() {
      this.blurInputPass();
      this.blurVerification();
      this.blurInputName();
      if (
        this.inputNameTips == "" &&
        this.inputPassTips == "" &&
        this.inputVerificationTips == ""
      ) {
        sessionStorage.setItem("tok", this.inputPass); //储存token值
        this.$router.push("/home");
        //登陆提示
        this.$message({
          message: "登陆成功",
          type: "success",
        });
      }
    },
  },
};
</script>
<style scoped>
.login-box {
  width: 100vw;
  height: 70vh;
  padding-top: 30vh;
  background: #20a0fe;
}
.loginFrom {
  width: 29%;
  height: 37%;
  background: azure;
  margin: auto;
  padding: 3%;
  padding-bottom: 6.5%;
}

.Verification {
  width: 100%;
  height: 20%;
  margin-bottom: 3%;
  display: flex;
}
.Verification-input {
  flex: 2;
  margin: 0;
}
.Verification-Code {
  flex: 2;
  margin: 0;
  padding-right: 1%;
  text-align: right;
  line-height: 234%;
  display: inline-block;
}
.login-tit {
  text-align: right;
}

.Verification-Code span {
  display: inline-block;
  width: 17%;
  height: 100%;
  background: #eee;
  text-align: center;
  /* 字体大小12-35 */
  /* font-size: 12px; */
  /* 字体粗细随意 */
  /* font-weight: 900; */
}
p {
  width: 100%;
  color: red;
  height: 3.3vh;
}
</style>